import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import './index.less';

export interface ICollectItemProps {
    id: string;
    // 收藏夹标题
    title: string;
    // 最近更新的时间
    recentUpdateTime: string;
    // 内容数量
    contentNumber: number;
}

interface ICollectItem {
    id: string;
    contentTitle: string;
}

export default function CollectItem(props: ICollectItemProps) {
    const [collectItemList, setCollectItemList] = useState<ICollectItem[]>([]);
    const [isFold, setIsFold] = useState<boolean>(true);

    function requestItemData() {
        // TODO
        if (!collectItemList.length) {
            setCollectItemList([
                { id: '1', contentTitle: '操作系统' },
                { id: '2', contentTitle: '算法' },
                { id: '3', contentTitle: '计算机网络' },
            ]);
        }
        setIsFold(!isFold);
    }

    return (
        <div className="collect-item" onClick={() => requestItemData()}>
            <h2>{props.title}</h2>
            <div className="brief-info">
                <span>最近更新 {props.recentUpdateTime}</span>
                <span>{props.contentNumber} 内容</span>
                <div className="unfold">
                    <span>{isFold ? '展开' : '收起'}</span>
                    {isFold ? <DownOutlined /> : <DownOutlined rotate={180} />}
                </div>
            </div>
            <div className="collect-list">
                {!isFold &&
                    collectItemList.map((item) => {
                        return (
                            <div className="collect-list-item" key={item.id}>
                                {item.contentTitle}
                            </div>
                        );
                    })}
            </div>
        </div>
    );
}
